<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="70%">
      <el-form ref="dialogForm" :model="form" :inline="true" :rules="rules" class="demo-ruleForm">
        <el-row :gutter="10">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
                <el-input-number v-model="form.sort" controls-position="right" :min="1" :max="10"></el-input-number>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="FormSub('dialogForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-button-group style="margin: 0px 0px 10px 0px">
      <el-button type="primary" icon="el-icon-plus" @click="dialogForm(1)">添加</el-button>
      <el-button type="primary" icon="el-icon-edit" @click="dialogForm(2)">修改</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="dialogDelete()">删除</el-button>
    </el-button-group>
    <el-container>
      <el-table
        :columns="columns"
        ref="singleTable"
        v-loading="listLoading"
        row-key="id"
        :height="height"
        :data="list"
        @row-click='rowClick'
        highlight-current-row
        element-loading-text="Loading"
        border
        fit
        default-expand-all
        :tree-props="{children: 'children'}">
        <el-table-column v-for="(column, key) in columns"
                         :prop="column.prop"
                         :label="column.label"
                         :width="column.width"
                         :fixed="column.fixed"
                         :formatter="column.formatter">
        </el-table-column>
        <el-table-column
          prop="isValid"
          label="状态"
          width="100">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.isValid === '0' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.isValid === '0'?'可用':'禁用'}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-container>
    <el-pagination
      background
      :layout="layout"
      :total="total"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </div>
</template>
<script>
import { parseTime } from '@/utils'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      columns: [],
      height: 200,
      winHeight: 200,
      title: '',
      value: [],
      options: [],
      dialogFormVisible: false,
      layout: 'sizes, prev, pager, next, jumper, ->, total',
      pageSizes: [10, 20, 30, 40, 50, 100],
      pageSize: 10,
      parent: 0,
      total: 0,
      currentPage: 1,
      filterText: '',
      list: [],
      listLoading: true,
      formLabelWidth: '120px',
      row: [],
      form: {
        id: '',
        addOrup: 1,
        sort: 1
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created: function() {
    this.height = (window.innerHeight > 300 ? window.innerHeight - 200 : 100)
    this.getColumns()
    this.superDepAjax()
  },
  mounted() {
    // 挂载浏览器高度获取方法
    const that = this
    window.onresize = () => {
      return (() => {
        that.winHeight = window.innerHeight
      })()
    }
    // this.$refs.nav.style.height = this.winHeight + 'px'
  },
  watch: {
    // 监控浏览器高度变化
    winHeight(val) {
      this.winHeight = val
      this.height = (this.winHeight > 300 ? this.winHeight - 200 : 100)
    }
  },
  methods: {
    state(row, column) {
      return row.val === 0 ? '<el-tag type="success">可用</el-tag>' : '<el-tag type="success">禁用</el-tag>'
    },
    getColumns() {
      const self = this
      this.$http.get('/dev-api/columns/table/by/BMGL')
        .then(res => {
          self.columns = res.data.data
          self.getList(self.currentPage, self.pageSize, this.parent)
        })
    },
    dialogDelete() {
      if (this.row.length <= 0) {
        alert('请先选择要删除的菜单!')
        return
      }
      const self = this
      this.$confirm('此操作将删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const that = this
        this.$http.get('/dev-api/shop/product-img1/del/' + this.row.id)
          .then(res => {
            that.$message({
              type: res.data.code === 20000 ? 'success' : 'info',
              message: res.data.code === 20000 ? '删除成功！' : '删除失败！'
            })
            self.getList()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    dialogForm(val) {
      this.form.id = ''
      this.form.sort = 1
      if (val === 1) {
        this.title = '添加部门'
        this.form.sort = 1
        this.form.addOrup = 1
      } else {
        if (this.row.length <= 0) {
          alert('请先选择要修改的部门!')
          return
        }
        this.form.id = this.row.id
        this.form.sort = this.row.sort
        this.title = '修改部门'
        this.form.addOrup = 2
      }
      this.dialogFormVisible = true
    },
    FormSub(formName) {
      const self = this
      if (this.form.addOrup === 1) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.superMod = this.value[this.value.length - 1]
            this.$http.post('/dev-api/shop/product-img1/save', this.form)
              .then(res => {
                this.dialogFormVisible = false
                self.$message({
                  type: res.data.code === 20000 ? 'success' : 'info',
                  message: res.data.code === 20000 ? '保存成功！' : '保存失败！'
                })
                self.getList()
              })
          }
        })
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.form.superMod = this.value[this.value.length - 1]
            this.$http.post('/dev-api/shop/product-img1/update', this.form)
              .then(res => {
                console.log(res.data.code)
                this.dialogFormVisible = false
                self.$message({
                  type: res.data.code === 20000 ? 'success' : 'info',
                  message: res.data.code === 20000 ? '修改成功！' : '修改失败！'
                })
                self.getList()
                this.dialogFormVisible = false
              })
          }
        })
      }
    },
    getList: function (currentPage, Size, parent) {
      var self = this
      this.$http.get('/dev-api/shop/product-img1/list?pageIndex=' + currentPage + '&pageSize=' + Size + '&parent=' + parent)
        .then(res => {
          self.list.pop()
          self.total = res.data.total
          self.list = res.data.data
          for (let i = 0; i < self.list.length; i++) {
            self.list[i].createTime = parseTime(self.list[i].createTime)
            self.list[i].modifyTime = parseTime(self.list[i].modifyTime)
          }
          self.listLoading = false
        })
    },
    currentChange(val) {
      this.currentPage = val
      this.getList(this.currentPage, this.pageSize, this.parent)
    },
    sizeChange(val) {
      this.pageSize = val
      this.getList(this.currentPage, this.pageSize, this.parent)
    },
    rowClick(row, column, event) {
      this.row = row
    }
  }
}
</script>
